.App {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;

    &>.left {
        height: 100%;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        overflow: hidden;

        &>.ant-menu {
            flex: 1;
            overflow: hidden;
        }
    }

    &>.right {
        flex: 1;
        height: 100%;
        background: #212121;
        overflow: hidden;

        &>.Home {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 40px;
            color: #FFFFFF;
        }

        &>.Page {
            width: calc(100% - 32px);
            height: calc(100% - 32px);
            padding: 16px;
            color: white;
            overflow-y: scroll;
            overflow-x: hidden;

            &::-webkit-scrollbar {
                display: none;
            }

            .Label {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                margin: 8px 0;

                &>label {
                    width: 200px;
                    text-align: right;
                    margin-right: 16px;
                }

                &>*:last-child {
                    flex: 1;
                }
            }

            .ant-checkbox,
            .ant-checkbox-wrapper,
            .ant-pagination-item>a {
                color: white;
            }


            &>.wj-flexgrid {
                height: 60vh;
            }

            .ant-select,
            .ant-input-number {
                width: 100%;
            }


            .wj-flexgrid .wj-cell {
                height: 48px;
                padding: 8px;
                line-height: 32px;
            }

            .Switch {
                display: flex;
                align-items: center;
                justify-content: flex-start;

                &>div {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-direction: column;
                    margin: 0 8px;
                }
            }



            .wj-cell {
                border-color: #e0e0e0;
            }

            .wj-cell.wj-has-notes:after {
                position: absolute;
                content: '';
                width: 0;
                right: 0;
                top: -10px;
                border: 10px solid transparent;
                border-right: 10px solid red;
                opacity: .5;
            }

            .wj-cell.wj-has-notes:hover:after {
                opacity: 1;
            }

            .systemOperation {
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .wj-rowheaders .wj-cell .wj-glyph-pencil {
                opacity: .5;
                transform: scale(.75);
            }

            .wj-rowheaders .wj-cell:hover .wj-glyph-pencil {
                opacity: 1;
                color: #cc0000;
                transform: scale(1.5) rotate(-90deg);
                transition: all 400ms;
            }

            .negative {
                color: red;
            }

            .wj-cell .v-center {
                position: relative;
                top: 50%;
                transform: translateY(-50%);
                white-space: pre-wrap;
            }


            .center {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                margin: 8px;
            }

            /* custom styling for a MultiRow */
            .multirow-css .wj-cell.wj-record-end:not(.wj-header) {
                border-bottom: 1px solid #000;
                /* thin black lines between records */
            }

            .multirow-css .wj-cell.wj-group-end {
                border-right: 2px solid #00b68c;
                /* thick green lines between groups */
            }

            .multirow-css .wj-cell.id {
                color: #c0c0c0;
            }

            .multirow-css .wj-cell.amount {
                color: #014701;
                font-weight: bold;
            }

            .multirow-css .wj-cell.email {
                color: #0010c0;
                text-decoration: underline;
            }

            /* custom styling for frozen cells */
            .wj-flexgrid .wj-cell.wj-frozen:not(.wj-header):not(.wj-group):not(.wj-state-selected):not(.wj-state-multi-selected) {
                background-color: #f3fbcc;
            }


            .Split {
                display: flex;
                align-items: flex-start;
                justify-content: center;

                &>div {
                    flex: 1;
                    margin: 0 8px;
                    overflow: hidden;

                    &>.wj-flexgrid {
                        height: 60vh;
                    }
                }


            }

            .olap {
                display: flex;
                align-items: flex-start;
                justify-content: center;
                overflow: hidden;


                &>div {
                    overflow: hidden;

                    &>.wj-flexgrid {
                        height: 60vh;
                    }

                    &:first-child {
                        width: 400px;
                        margin-right: 16px;


                        #sample-panel [wj-part=d-filters] {
                            background: #ffc53d;
                        }

                        #sample-panel [wj-part=d-cols] {
                            background: #ffec3d;
                        }

                        #sample-panel [wj-part=d-rows] {
                            background: #bae637;
                        }

                        #sample-panel [wj-part=d-vals] {
                            background: #73d13d;
                        }

                    }

                    &:last-child {
                        flex: 1;
                    }
                }
            }
        }
    }
}